<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医护工作管理平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        body {
            background-color: #f5f7fa;
            color: #333;
        }
        /* 顶部导航 */
        .header {
            background-color: #2d8cf0;
            color: white;
            padding: 16px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .header h1 {
            font-size: 20px;
            font-weight: 600;
        }
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        /* 功能导航 */
        .nav {
            background-color: white;
            padding: 12px 30px;
            border-bottom: 1px solid #eee;
        }
        .nav-btn {
            padding: 8px 16px;
            margin-right: 12px;
            background-color: #fff;
            border: 1px solid #2d8cf0;
            color: #2d8cf0;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .nav-btn.active {
            background-color: #2d8cf0;
            color: white;
        }
        /* 页面容器 */
        .page {
            padding: 20px 30px;
            display: none;
        }
        #home {
            display: block;
        }
        /* 首页布局 */
        .home-container {
            display: grid;
            grid-template-columns: 1fr 3fr;
            gap: 20px;
        }
        /* 患者列表 */
        .patient-list {
            background: white;
            border-radius: 8px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .patient-item {
            padding: 12px;
            border-radius: 4px;
            margin-bottom: 8px;
            cursor: pointer;
            border-left: 3px solid transparent;
        }
        .patient-item.active {
            background: #e8f4ff;
            border-left: 3px solid #2d8cf0;
        }
        /* 详情区域 */
        .detail-area {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .detail-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        .detail-table th, .detail-table td {
            padding: 12px;
            border-bottom: 1px solid #eee;
            text-align: left;
        }
        .detail-table th {
            background: #f9fafc;
            color: #666;
        }
        /* 可视化图表容器 */
        .chart-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 20px 0;
        }
        .chart-box {
            height: 300px;
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 10px;
        }
        /* 按钮样式 */
        .btn-group {
            display: flex;
            gap: 10px;
        }
        .operate-btn, .back-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            color: white;
            transition: opacity 0.3s;
            outline: none;
        }
        .operate-btn:hover, .back-btn:hover {
            opacity: 0.9;
        }
        .btn-primary {
            background: #2d8cf0;
        }
        .btn-success {
            background: #19be6b;
        }
        .btn-warning {
            background: #ff9900;
        }
        .back-btn {
            background: #666;
            margin-bottom: 20px;
        }
        /* 功能页面样式 */
        .func-content {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            line-height: 1.8;
        }
    </style>
    <!-- 引入ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="header">
        <h1><<i class="fas fa-user-md"></</i> 医护工作管理平台</h1>
        <div class="user-info">
            <span>张医生</span>
            <<i class="fas fa-user-circle"></</i>
        </div>
    </div>

    <!-- 功能导航 -->
    <div class="nav">
        <button class="nav-btn active" onclick="showPage('home', this)">住院患者</button>
        <button class="nav-btn" onclick="showPage('record', this)">病历管理</button>
        <button class="nav-btn" onclick="showPage('prescription', this)">医嘱开具</button>
        <button class="nav-btn" onclick="showPage('check', this)">安排检查</button>
    </div>

    <!-- 首页 -->
    <div id="home" class="page">
        <div class="home-container">
            <div class="patient-list">
                <h3>待处理患者</h3>
                <div class="patient-item active" onclick="switchPatient('李小明', '男/32岁', this)">
                    <div>李小明（男/32岁）</div>
                    <div style="font-size:12px;color:#666;">内科 | 高血压2级</div>
                </div>
                <div class="patient-item" onclick="switchPatient('王芳', '女/45岁', this)">
                    <div>王芳（女/45岁）</div>
                    <div style="font-size:12px;color:#666;">外科 | 骨折术后康复</div>
                </div>
                <div class="patient-item" onclick="switchPatient('张伟', '男/58岁', this)">
                    <div>张伟（男/58岁）</div>
                    <div style="font-size:12px;color:#666;">心内科 | 冠心病</div>
                </div>
            </div>

            <div class="detail-area">
                <h2>患者详情 - <span id="patientName">李小明</span></h2>
                <table class="detail-table">
                    <tr><<th>基本信息</</th><td id="baseInfo">男，32岁，联系电话：138****5678</td></tr>
                    <tr><<th>就诊信息</</th><td id="visitInfo">住院号：20240520001，床位：302床</td></tr>
                    <tr><<th>诊断结果</</th><td id="diagnosis">高血压2级（原发性）</td></tr>
                    <tr><<th>当前医嘱</</th><td id="prescription">硝苯地平缓释片 20mg qd</td></tr>
                </table>

                <!-- 数据可视化图表 -->
                <h3 style="margin:20px 0 10px;">健康数据监测</h3>
                <div class="chart-container">
                    <div class="chart-box" id="bpChart"></div>
                    <div class="chart-box" id="lipidChart"></div>
                </div>

                <div class="btn-group">
                    <button class="operate-btn btn-primary" onclick="showPage('record', document.querySelectorAll('.nav-btn')[1])">查看完整病历</button>
                    <button class="operate-btn btn-success" onclick="showPage('prescription', document.querySelectorAll('.nav-btn')[2])">开具新医嘱</button>
                    <button class="operate-btn btn-warning" onclick="showPage('check', document.querySelectorAll('.nav-btn')[3])">安排检查</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 病历管理页面 -->
    <div id="record" class="page">
        <button class="back-btn" onclick="showPage('home', document.querySelectorAll('.nav-btn')[0])">返回首页</button>
        <div class="func-content">
            <h3>患者完整病历 - 李小明</h3>
            <p>入院时间：2024-05-20</p>
            <p>主诉：反复头痛头晕1年，加重1周</p>
            <p>现病史：患者1年前无明显诱因出现头痛头晕，呈持续性，无恶心呕吐，未规律诊治。1周前症状加重，测血压160/100mmHg，为进一步治疗入院。</p>
            <p>体格检查：BP：150/95mmHg，神志清，精神可，双肺呼吸音清，心率78次/分，律齐。</p>
            <p>辅助检查：血脂：总胆固醇 6.8mmol/L，甘油三酯 2.3mmol/L；心电图大致正常。</p>
        </div>
    </div>

    <!-- 医嘱开具页面 -->
    <div id="prescription" class="page">
        <button class="back-btn" onclick="showPage('home', document.querySelectorAll('.nav-btn')[0])">返回首页</button>
        <div class="func-content">
            <h3>开具新医嘱</h3>
            <p>患者：李小明</p>
            <div style="margin:20px 0;">
                <label>药物名称：</label>
                <input type="text" placeholder="输入药物名称" style="padding:8px; width:300px;">
            </div>
            <div style="margin:20px 0;">
                <label>剂量：</label>
                <input type="text" placeholder="如：20mg" style="padding:8px; width:100px;">
            </div>
            <div style="margin:20px 0;">
                <label>给药频率：</label>
                <select style="padding:8px;">
                    <option>qd（每日一次）</option>
                    <option>bid（每日两次）</option>
                    <option>tid（每日三次）</option>
                </select>
            </div>
            <button class="operate-btn btn-success">提交医嘱</button>
        </div>
    </div>

    <!-- 安排检查页面 -->
    <div id="check" class="page">
        <button class="back-btn" onclick="showPage('home', document.querySelectorAll('.nav-btn')[0])">返回首页</button>
        <div class="func-content">
            <h3>安排检查 - 李小明</h3>
            <div style="margin:20px 0;">
                <label>检查项目：</label>
                <select style="padding:8px; width:300px;">
                    <option>血常规</option>
                    <option>血脂全套</option>
                    <option>心电图</option>
                    <option>脑部CT</option>
                </select>
            </div>
            <div style="margin:20px 0;">
                <label>检查时间：</label>
                <input type="date" style="padding:8px;">
            </div>
            <button class="operate-btn btn-warning">确认安排</button>
        </div>
    </div>

    <script>
        // 页面加载完成后初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            initCharts();
        });

        // 初始化所有图表
        function initCharts() {
            // 血压趋势图
            const bpChart = echarts.init(document.getElementById('bpChart'));
            bpChart.setOption({
                title: { text: '近7日血压趋势', fontSize: 14, left: 'center' },
                tooltip: { trigger: 'axis' },
                legend: { data: ['收缩压', '舒张压'], bottom: 0 },
                grid: { left: '10%', right: '5%', top: '20%', bottom: '15%' },
                xAxis: { type: 'category', data: ['5/20', '5/21', '5/22', '5/23', '5/24', '5/25', '5/26'] },
                yAxis: { type: 'value', name: '血压(mmHg)', min: 80, max: 180 },
                series: [
                    { name: '收缩压', type: 'line', data: [160, 158, 155, 152, 150, 148, 145], lineStyle: { color: '#e74c3c' } },
                    { name: '舒张压', type: 'line', data: [100, 98, 96, 95, 94, 93, 92], lineStyle: { color: '#3498db' } }
                ]
            });

            // 血脂指标对比图
            const lipidChart = echarts.init(document.getElementById('lipidChart'));
            lipidChart.setOption({
                title: { text: '血脂指标对比', fontSize: 14, left: 'center' },
                tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                grid: { left: '10%', right: '5%', top: '20%', bottom: '10%' },
                xAxis: { type: 'category', data: ['总胆固醇', '甘油三酯', '低密度脂蛋白', '高密度脂蛋白'] },
                yAxis: { type: 'value', name: '浓度(mmol/L)' },
                series: [
                    { name: '患者数值', type: 'bar', data: [6.8, 2.3, 4.5, 1.1], itemStyle: { color: '#2d8cf0' } },
                    { name: '正常上限', type: 'bar', data: [5.2, 1.7, 3.4, 1.0], itemStyle: { color: '#95a5a6', opacity: 0.6 } }
                ]
            });

            // 窗口 resize 时图表自适应
            window.addEventListener('resize', function() {
                bpChart.resize();
                lipidChart.resize();
            });
        }

        // 切换页面（直接传入按钮元素，避免 event 问题）
        function showPage(pageId, btnElem) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(page => {
                page.style.display = 'none';
            });
            // 显示目标页面
            document.getElementById(pageId).style.display = 'block';
            // 更新导航按钮激活状态
            document.querySelectorAll('.nav-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            btnElem.classList.add('active');
        }

        // 切换患者信息
        function switchPatient(name, baseInfo, itemElem) {
            document.getElementById('patientName').textContent = name;
            document.getElementById('baseInfo').textContent = baseInfo + '，联系电话：138****5678';
            // 更新患者列表激活状态
            document.querySelectorAll('.patient-item').forEach(item => {
                item.classList.remove('active');
            });
            itemElem.classList.add('active');
        }
    </script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
</body>
</html>